<template>
  <a-card :bordered="false">
    <h3>举报管理</h3>
    <ContentFilter ref="filter" :type="6" :activeKey="activeKey" :extensionVisible.sync="extensionVisible" @onSearch="onSearch"></ContentFilter>
    <a-tabs v-model="activeKey" @change="tabChange">
      <a-tab-pane v-for="item in tabList" :tab="item.name" :key="item.status"> </a-tab-pane>
    </a-tabs>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1300 }">
      <span slot="userInfor" slot-scope="record"> {{ record.userNickname }}<template v-if="record.phone && record.phone != -1">/{{ record.phone }}</template>(社区ID：{{ record.communityId }}) </span>
      <span slot="reason" slot-scope="record">
        <div style="font-weight: bold;">{{ record.informType }}</div>
        <div style="color: #999;">{{ record.informReason }}</div>
      </span>
      <span slot="processResult" slot-scope="text, record">
        <span v-if="record.processResult == 0">忽略举报</span>
        <span v-if="record.processResult == 1">内容已禁用</span>
      </span>
      <span slot="imageVideo" slot-scope="text, record, index">
        <div v-if="record.contentType == 0" class="image-video-wrapper">
          <template v-if="record.pictureVideo">
            <img class="img" v-for="(item, index) in record.pictureVideo.split(',').slice(0, 1)" :src="item" alt="" @click="handleShowImg(index, record.pictureVideo.split(','))" :key="index" />
            <div class="img-num">{{ record.pictureVideo.split(',').length }}张</div>
          </template>
        </div>
        <img
          v-else
          class="image-video-wrapper img"
          @click="handlePreview(record.pictureVideo)"
          :src="record.cover"
          alt=""
        />
      </span>
      <span slot="content" slot-scope="record">
        <p style="font-weight: bold;">{{ record.contentTitle }}</p>
        <a-popover :overlayStyle="{ width: '380px', height: 'auto' }">
          <template slot="content">
            <p style="word-break: break-all;">{{ record.bodyContent }}</p>
          </template>
          <span class="remarks">{{ record.bodyContent }}</span>
        </a-popover>
      </span>
      <span  class="img-wrapper" slot="productList" slot-scope="text, record, index">
        <template v-if="record.goodList.length">
          <div class="img-list" @click="handleShowProductList(record.goodList)">
            <template v-for="(item, index) in record.goodList.slice(0, 3)" >
              <img class="img" v-if="item.image" :src="item.image" alt="" :key="index" />
              <img class="img" v-else src="https://picttype1.jnby.com/community/goods/pl-goods.png" alt="" :key="'place'+index" />
            </template>
          </div>
          <div class="img-text" @click="handleShowProductList(record.goodList)">共{{ record.goodList.length }}件</div>
        </template>
      </span>
      <span slot="action" slot-scope="record">
        <a v-if="activeKey == 0 || activeKey == 1" @click="handleDetails(record.contentId)">内容详情</a>
        <a-divider type="vertical" v-if="activeKey == 0" />
        <template v-if="activeKey == 0">
          <a-popconfirm title="确定忽略该条举报吗？" ok-text="确定" cancel-text="暂不" @confirm="handleignore(record)">
            <a>忽略</a>
          </a-popconfirm>
          <a-divider type="vertical" />
        </template>
        <a v-if="activeKey == 0" @click="handleDisable(record.id, record.contentId)">禁用内容</a>
      </span>
    </s-table>
    <ParagraphPic :current="imgCurrent" :visible.sync="imgVisible" :imgs="imgs"></ParagraphPic>
    <PreviewVideo :visible.sync="previewVisible" :videoUrl="videoUrl"></PreviewVideo>
    <ExamineOrDetailsModal :bodyContent="bodyContent" :pictureVideo="pictureVideo" :details.sync="details" :type="3" :isDetails="true" :visible.sync="examineOrDetailsVisible"></ExamineOrDetailsModal>
    <DisableModal :visible.sync="disableVisible" :whyList="whyList" @onOk="onOk"></DisableModal>
    <ProductListModal :visible.sync="productVisible" :productList="productList"></ProductListModal>
  </a-card>
</template>
<script>
import { informList, contentDetails, informIgnore, contentAddOrUpdate, informCount, contentInformDisable } from '@/api/micromall/communityContent'
import { STable } from '@/views/box/components'
import ContentFilter from '../../components/ContentFilter'
import ParagraphPic from '../../components/ParagraphPic'
import PreviewVideo from '../../components/PreviewVideo'
import { pendingColumns, processedColumns } from '../contentManagement/reportList.js'
import ExamineOrDetailsModal from '../../components/ExamineOrDetailsModal'
import DisableModal from '../../components/DisableModal'
import ProductListModal from '../../components/ProductListModal'
import { mapGetters } from 'vuex'
import { whyPage } from '@/api/micromall/communityUser'
const tabList = [
  // 0待处理 1已处理"
  {
    name: '待处理',
    status: '0'
  },
  {
    name: '已处理',
    status: '1'
  }
]
export default {
  components: {
    ContentFilter,
    STable,
    ParagraphPic,
    PreviewVideo,
    ExamineOrDetailsModal,
    DisableModal,
    ProductListModal
  },
  data() {
    return {
      bodyContent: '',
      pictureVideo: [],
      id: '',
      contentId: '',
      whyList: [],
      details: {},
      disableVisible: false,
      examineOrDetailsVisible: false,
      extensionVisible: false,
      videoUrl: '',
      previewVisible: false,
      productVisible: false,
      imgCurrent: 0,
      imgVisible: false,
      imgs: [],
      productList: [
      ],
      tabList,
      activeKey: tabList[0].status,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      columns: pendingColumns,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
      },
      queryParam: {},

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const data = {
         status: this.activeKey,
          ...this.queryParam,
          current: parameter.pageNo,
          size: parameter.pageSize,
        }
        return informList(data).then(res => {
          if (res.code === 200) {
            const { records, total, size, current } = res.data
            const data = {
              page: {
                count: total,
                pageNo: current,
                pageSize: size,
                pages: Math.ceil(total / size)
              },
              data: records
            }
            return data
          } else {
            this.$message.error(res.msg)
            const data = {
              page: {
                count: 0,
                pageNo: 0,
                pages: 0
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  created() {
    this.getWhyPage()
    this.getCount()
  },
  computed: {},
  mounted() {},
  watch: {
  },
  methods: {
    
    // 获取状态数量
    getCount() {
       informCount({}).then(res => {
        if (res.code === 200) {
        const {process, undisposed} = res.data
          this.tabList[0].name = `待处理（${undisposed || 0}）`
          this.tabList[1].name = `已处理（${process || 0}）`
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

     // 展示关联商品
    handleShowProductList(productList) {
      this.productList = productList
      this.productVisible = true
    },

    // 详情
    handleDetails(id) {
      this.examineOrDetailsVisible = true
      this.details = {}
      contentDetails({ id }).then(res => {
        if (res.code === 200) {
         const {bodyContent, contentTitle, id, pictureReason, literalReason, pictureVideo} = res.data
          this.bodyContent = bodyContent
          let currentContentTitle = contentTitle
          const currentPictureReason = pictureReason ? JSON.parse(pictureReason) : []
          if (pictureVideo) {
            this.pictureVideo = pictureVideo.split(',').map(e => {
              const index = currentPictureReason.map(i => i.url).indexOf(e)
              return {
                url: e,
                explain: index >=0 ? currentPictureReason[index].explain : '',
                isViolations: currentPictureReason.map(i => i.url).includes(e)
              }
            })
          }
          if (literalReason) {
            literalReason.split(',').forEach(e => {
              if (e) {
                currentContentTitle = currentContentTitle.replace(new RegExp(e,'g'), `<span style="color: red;">${e}</span>`)
                this.bodyContent = this.bodyContent.replace(new RegExp(e,'g'), `<span style="color: red;">${e}</span>`)
              }
            })
          }
          this.details = {...res.data, contentTitle: currentContentTitle}
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 忽略
    handleignore(record) {
      const { id ,userId, status, processResult } = record
      const data = {
        id,
        userId,
        status,
        processResult
      }
      informIgnore(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
          this.getCount()
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 禁用原因
    getWhyPage() {
      // 3内容禁用原因
      const data = {
        type: 3,
        status: 0
      }
      whyPage(data).then(res => {
        if (res.code === 200) {
          this.whyList = res.data.records
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 禁用
    handleDisable(id, contentId) {
      this.id = id
      this.contentId = contentId
      this.disableVisible = true
    },

    // 禁用弹窗确认
    onOk(v) {
      const { note, why } = v
      const data = {
        id: this.id,
        informType: why.map(e => e.whyName).join(','),
        informReason: note
        // contentId: this.contentId,
        // status: '1',
        // disableWhy: why.map(e => e.id).join(','),
        // disableNote: note,
        // whyName: why.map(e => e.whyName).join(',')
      }
      contentInformDisable(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
          this.getCount()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),

    // 预览视频
    handlePreview(url) {
      this.videoUrl = url
      this.previewVisible = true
    },

    tabChange(activeKey) {
      this.$nextTick(() => {
        this.activeKey = activeKey
        switch (activeKey) {
          case '0':
            // 待处理
            this.columns = pendingColumns
            break
          case '1':
            // 已处理
            this.columns = processedColumns
            console.log(this.columns, 'this.columns')
            break
        }
        this.$refs.filter.reset()
      })
    },

    checkRoute(fromPath, routeArr) {
      for (let i = 0; i < routeArr.length; i++) {
        if (fromPath.includes(routeArr[i])) {
          return true
        }
      }
      return false
    },

    //关联商品
    handleShowCurrentProductList(list) {
      this.productList = list
      this.productVisible = true
    },

    // 查看大图
    handleShowImg(index, productImgList) {
      this.imgCurrent = index
      this.imgVisible = true
      this.imgs = productImgList
    },

    //查询
    onSearch(obj) {
      this.queryParam = obj
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-tabs-bar {
  margin-bottom: 0;
}

.img-wrapper {
  display: flex;

  .img-list {
    display: flex;
  }

  .img-text {
    line-height: 60px;
    color: #999;
  }
}

.img {
  display: block;
  margin: 0 2px;
  width: 60px;
  height: 60px;
  border: 1px dashed #f5f5f5;
  object-fit: scale-down;
  cursor: pointer;
}

.remarks {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  word-break: break-all; /* 追加这一行代码 */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.product {
  display: flex;
  overflow: hidden;
  .img {
    margin: 0;
  }
  .product-name {
    flex: 1;
    margin-left: 5px;
    width: 80px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}
.product-list {
  .product-item {
    line-height: 18px;
    text-align: left;
  }

  .product-num {
    cursor: pointer;
    text-align: left;
  }
}
.content-record {
  position: absolute;
  right: 0;
  top: 15px;
}
.image-video-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  .img-num {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
  }
}
</style>
